<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=0.1, maximum-scale=1.0, user-scalable=1;" name="viewport" />
    <title>{$site_seo_title}</title>
    <meta name="keywords" content="{$site_seo_keywords}" />
    <meta name="description" content="{$site_seo_description}">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/all.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/banner.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/index.css">
    <script src="__TMPL__Public/assets/js/jquery-1.11.1.min.js"></script>
    <script src="__TMPL__Public/assets/js/banner.js"></script>
    <script src="__TMPL__Public/assets/js/stepcarousel.js" type="text/javascript"></script>
    <script type="text/javascript">
        stepcarousel.setup({
            galleryid: 'mygallery', //id of carousel DIV
            beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
            panelclass: 'panel', //class of panel DIVs each holding content
            panelbehavior: {speed:300, wraparound:false, persist:true},
            autostep: {enable:true, moveby:4, pause:10000},
            defaultbuttons: {enable: true, moveby: 4, leftnav: ['/themes/simplebootx/Public/assets/images/butt-left.gif', 30, 64], rightnav: ['/themes/simplebootx/Public/assets/images/butt-right.gif', -30, 64]},
            statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
            contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
            oninit:function(){
                isloaded=true;
                document.getElementById('displaycssbelt').style.visibility="visible";
                document.getElementById('stocklevels').style.visibility="visible";
            }
        })
    </script>
</head>
<body>
<tc_include file="Public:head" />
<php>
    $home_slides=sp_getslide("PcIndex");

    $home_slides=empty($home_slides)?'':$home_slides;
</php>
<div class="banner">
    <section class="index_banner">
        <ul class="index_banner_img">
            <foreach name="home_slides" item="vo">
                <li><img src="{:sp_get_asset_upload_path($vo['slide_pic'])}" alt="" style="min-height: 800px"></li>
            </foreach>
        </ul>
        <ul class="index_banner_fy">
            <php>$count=count($home_slides);</php>
            <php>
                for($i=0;$i<$count;$i++){
            </php>
            <li></li>
            <php>
                }
            </php>
        </ul>
        <script>
            $('.index_banner_fy li ').eq(0).addClass('on');
        </script>
    </section>
</div>
<!--<div class="banner_bottom_four">
    <div id="mygallery" class="stepcarousel">
        <div class="belt" id="displaycssbelt">
            <foreach name="articles" item="article">
                <php>
                    $smeta=json_decode($article['smeta'], true);
                </php>
                <div class="panel">
                    <div class="subfeature"><a href="{:U('Portal/Index/article',['id'=>$article['id']])}"><img src="{:sp_get_asset_upload_path($smeta['thumb'])}" alt="butterflies-are-gross" class="post-image"/></a>

                    </div>
                </div>
            </foreach>
        </div>
    </div>
</div>-->

<div class="four_img">
    <ul>
        <foreach name="articles" item="article">
            <php>
                $smeta=json_decode($article['smeta'], true);
            </php>
            <li><div class="four_img_li_img"><a href="{:U('Portal/Index/article',['id'=>$article['id']])}"><img src="{:sp_get_asset_upload_path($smeta['thumb'])}"/></a></div></li>
        </foreach>
    </ul>
    <div class="four_img_left"> < </div>
    <div class="four_img_right"> > </div>
</div>
<script>
$(window).load(function(){
    var a = 0;
    var b = $(".four_img li").length;
    var c = Math.ceil( b / 4 );
    for(var i = 0 ; i < $(".four_img li").length; i++){
        $(".four_img li").eq(i).addClass("four_li"+Math.floor( i / 4 ));
    }
    $(".four_img_left").click(function(){

        if(a == 0){
            a = c - 1;
        }
        else{
            a--;
        }
        $(".four_img li").hide();
        $(".four_li" + a).fadeIn();
    })

    $(".four_img_right").click(function(){

        if(a == c - 1){
            a = 0;
        }
        else{
            a++;
        }
        $(".four_img li").hide();
        $(".four_li" + a).fadeIn();
    })

})

</script>

<style>
    .four_img{
        width:100%;
        float:left;
        margin-top:20px;
        position:relative;
        overflow:hidden;
        height:205px;
    }
    .four_img_left{
        width:30px;
        height:30px;
        border-radius:50% 50%;
        background:rgba(0,0,0,0.5);
        text-align:center;
        line-height:30px;
        color:#fff;
        font-size:24px;
        position:absolute;
        left:20px;
        top:87px;
        cursor:pointer;
    }
    .four_img_right{
        width:30px;
        height:30px;
        border-radius:50% 50%;
        background:rgba(0,0,0,0.5);
        text-align:center;
        line-height:30px;
        color:#fff;
        font-size:24px;
        position:absolute;
        right:20px;
        top:87px;
        cursor:pointer
    }
    .four_img ul{
        width:100%;
        float:left;
        height:100%
    }
    .four_img li{
        width:25%;
        float:left;
        padding:0 10px;
        height:205px;
    }
    .four_img_li_img{
        overflow:hidden;
        width:100%;
        height:100%;
        float:left;
        position:relative;
    }
    .four_img li img{
        width:460px;
        position:absolute;
        left:50%;
        margin-left:-230px;
    }
</style>

<tc_include file="Public:footer" />